<template>
  <div id="container"></div>
</template>

<script setup>
import { onMounted } from 'vue';
import * as Cesium from 'cesium';
import './Widgets/widgets.css';

// 设置cesium 静态资源路径
window.CESIUM_BASE_URL = '/';

// 天地图 官网申请的key https://console.tianditu.gov.cn/api/key
const webKey = '01fc395160d8eb3b82aefe65b2280e58';

Cesium.Ion.defaultAccessToken =
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmNDkwYWVhOS0wNzI5LTQ3OTEtOWFiMC1kY2M3MTFiM2I2NWQiLCJpZCI6MTkyNTU1LCJpYXQiOjE3MDY1MTM0MTh9.YAPVHr1d7PBuWayCXM9deCxKg3AbtsXUJiVpubVS3NY';

onMounted(async () => {
  // 地球视图，底图加载
  const viewer = new Cesium.Viewer('container', {
    //设置地形
    terrainProvider: Cesium.createWorldTerrain({
      requestWaterMask: true, // 水纹效果  海里面有波浪的效果
      requestVertextNormal: true, // 光照效果
    }),

    //信息窗口
    infoBox: false,
  });

  //隐藏cesium Icon-logo
  viewer.cesiumWidget.creditContainer.style.display = 'none';

  // 示例代码 https://cesium.com/learn/cesiumjs-learn/cesiumjs-creating-entities#picking
  // 设置材质 https://cesium.com/learn/cesiumjs/ref-doc/ColorMaterialProperty.html?classFilter=colorMat
  const material22 = new Cesium.CheckerboardMaterialProperty({
    evenColor: Cesium.Color.WHITE,
    oddColor: Cesium.Color.BLACK,
    repeat: new Cesium.Cartesian2(4, 4),
  });
  console.log(material22);

  var imageMaterial = new Cesium.ImageMaterialProperty({
    image: './texture/rant.png',
  });

  // api https://cesium.com/learn/cesiumjs-learn/cesiumjs-creating-entities#picking
  const material33 = new Cesium.StripeMaterialProperty({
    evenColor: Cesium.Color.WHITE,
    oddColor: Cesium.Color.BLACK,
    repeat: 6,
  });

  // 加载模型
  // 使用entities 创建矩形
  const rectangle = viewer.entities.add({
    // name: 'Rectangle',
    id: 'entitiesRec',
    // position: Cesium.Cartesian3.fromDegrees(113.3191, 23.109, 2000),
    rectangle: {
      coordinates: Cesium.Rectangle.fromDegrees(-135.0, 20.0, -115.0, 30.0),
      // material: Cesium.Color.RED.withAlpha(0.5), // 材质颜色
      // outline: true,
      // outlineColor: Cesium.Color.BLACK,
      // outlineWidth: 2,
      material: material33,
      // material: imageMaterial,
      // material: material22,
    },
  });

  // 几何体 实例
  const instance = new Cesium.GeometryInstance({
    id: 'instance',
    //primivite 创建矩形 【官网案例】api https://cesium.com/learn/cesiumjs-learn/cesiumjs-geometry-appearances/
    geometry: new Cesium.RectangleGeometry({
      // 创建几何体
      // API https://cesium.com/learn/cesiumjs/ref-doc/RectangleGeometry.html?classFilter=RectangleGeometry
      rectangle: Cesium.Rectangle.fromDegrees(-100.0, 20.0, -90.0, 30.0),
      height: 0,
      vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT, // 每个实例的颜色外观
    }),
    attributes: {
      color: new Cesium.ColorGeometryInstanceAttribute(0.0, 0.0, 1.0, 0.8),
    },
  });

  const anotherInstance = new Cesium.GeometryInstance({
    id: 'anotherInstance',
    geometry: new Cesium.RectangleGeometry({
      rectangle: Cesium.Rectangle.fromDegrees(-85.0, 20.0, -75.0, 30.0),
      vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
    }),
    attributes: {
      color: new Cesium.ColorGeometryInstanceAttribute(1.0, 0.0, 0.0, 0.8),
    },
  });

  // 创建图元
  const primitive = new Cesium.Primitive({
    geometryInstances: [instance, anotherInstance], // 同时有多个几何体
    appearance: new Cesium.PerInstanceColorAppearance({
      flat: true, // 平坦 - 平坦的阴影。不考虑照明。https://cesium.com/learn/cesiumjs-learn/cesiumjs-geometry-appearances/#appearances
    }),
  });

  // 添加到场景中 https://cesium.com/learn/cesiumjs-learn/cesiumjs-geometry-appearances/
  viewer.scene.primitives.add(primitive);

  // 设置相机位置
  // viewer.camera.setView(viewer.scene);

  // 动态修改图元 颜色
  setInterval(() => {
    const attributes = primitive.getGeometryInstanceAttributes('instance');
    attributes.color = Cesium.ColorGeometryInstanceAttribute.toValue(
      Cesium.Color.fromRandom({ alpha: 1.0 })
    );
  }, 2000);

  // 拾取 点击事件
  const handle = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
  handle.setInputAction((movment) => {
    console.log(movment); // 点击位置的二维坐标
    const pickedObject = viewer.scene.pick(movment.position);
    // pickedObject.id 是字符串时，为primitive 创建的， 如果是entities 则该图元是 entities创建的
    if (Cesium.defined(pickedObject && typeof pickedObject.id === 'string)')) {
      // console.log(pickedObject.id);
      const attributes = primitive.getGeometryInstanceAttributes(
        pickedObject.id
      );
      attributes.color = Cesium.ColorGeometryInstanceAttribute.toValue(
        // Cesium.Color.fromRandom({ alpha: 1.0 })
        Cesium.Color.YELLOW.withAlpha(0.5)
      );
    }
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
});
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
#container {
  height: 94vh;
  width: 94vw;
}
</style>
